<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- 引入标题图标 -->
   <link rel="shortcut icon" href="../../assets/image/logo_small.jpg" type="image/x-icon">
   <!-- 引入bootstrap核心css -->
   <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
   <!-- 引入bootstrap核心图标css -->
   <link rel="stylesheet" href="../../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
   <!-- 引入自定义css -->
   <link rel="stylesheet" href="./login.css">

   <!-- 引入bootstrap核心js -->
   <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <!-- 引入jQuery核心js -->
   <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
   <!-- 引入jQuery-form.js  clearForm() -->
   <script src="../../node_modules/jquery-form/dist/jquery.form.min.js"></script>
   <!-- 引入jQuery扩展插件:根据json对象回显form表单 -->
   <script src="../../assets/js/jquery.common.js"></script>
   <!-- jQuery的扩展js  serializeObject()用的此插件-->
   <script src="../../assets/js/jquery.jdirk.js"></script>
    <title>智慧校园登录</title>
    <script>
        $(function(){
            $("#loginButton").on("click",function(){
                $.ajax({
                    "url":"http://localhost:8080/login",
                    "data":JSON.stringify($("#loginForm").serializeObject()),
                    "contentType":"application/json",
                    "type":"post",
                    "success":function(result){
                        //如果成功,关闭模态框,并且刷新列表
                        if(result.success){
                            window.location.href = "../index/index.html";
                            localStorage.setItem("token",result.data);
                        }else{
                            //显示模态框
                            $("#tipMessageBox").modal("show");
                            //设置错误信息
                            $("#tipMessage").html(result.message);
                        }
                    }
                })
            });
        })

    </script>
</head>
<body>
    <!-- 消息提示信息模态框 -->
  <div class="modal fade" id="tipMessageBox" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">提示</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" id="tipMessage" style="color: red;">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="tip-confirm-button">确定</button>
        </div>
      </div>
    </div>
  </div>
    <main class="main-content d-flex align-items-center justify-content-center">
        <div class="card card-login-div">
            <div class="card-body">
                <h3 class="text-center my-3">智慧校园</h3>
                <form id="loginForm">
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="basic-addon1"><i class="bi bi-people"></i></span>
                        <input type="text" name="username" class="form-control" placeholder="账号..." >
                    </div>
                    <div class="input-group mb-3">
                        <span class="input-group-text" id="basic-addon1"><i class="bi bi-person-lock"></i></span>
                        <input type="password" name="password" class="form-control" placeholder="密码..." >
                    </div>
                    <div class="d-grid gap-2">
                        <button id="loginButton" class="btn btn-primary" type="button">登录</button>
                    </div>
                    <div class="d-flex justify-content-center mt-3">
                        <div class="mx-3 fs-4 text-success"><i class="bi bi-wechat"></i></div>
                        <div class="mx-3 fs-4 text-danger"><i class="bi bi-tencent-qq"></i></div>
                        <div class="mx-3 fs-4 text-primary"><i class="bi bi-alipay"></i></div>
    
                    </div>
                </form>
            </div>
          </div>

    </main>
</body>
</html>